<template>
    <div class="cart-container">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-transitioning" v-for="item in list" :key="item.id">
                <div class="mui-slider-right mui-disabled">
                    <a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);" @click.prevent="deleteCartItem(item.id)">删除</a>
                    <a class="mui-btn mui-btn-blue" style="transform: translate(0px, 0px);" @click.prevent="">编辑</a>
                </div>
                <div class="mui-slider-handle" style="transform: translate(0px, 0px);margin-top: 10px" >
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" src="../../images/shuijiao.jpg">
                        <div class="mui-media-body">
                            {{item.title}}
                            <p class='mui-ellipsis' style="margin-top: 5px;" ><input type="checkbox" style="margin-right: 3px" :checked="item.selected">价格:<span>{{item.price}}</span>鞋码：{{item.size}}<span></span>*{{item.count}}双<span></span></p>
                        </div>
                    </a>
                </div>
            </li>

        </ul>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell"><p>总计：</p><p style="font-size: 24px;margin-top: 10px">{{$store.getters.getTotal.countTotal}}<span style="font-size: 14px;margin-right: 10px">件</span>{{$store.getters.getTotal.priceTotal}}<span style="font-size: 14px">元</span></p></li>
        </ul>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import mui from '../../lib/dist/js/mui.js'
    export default {
        data(){
            return {
                list:[],
                good_img1:'',
            }
        },
        methods:{
            getCartList(){
                this.$http.get('http://127.0.0.1:3002/getCartList').then((result)=>{
                    if(result.body.status == 0 ){
                        this.list = result.body.message;
                        localStorage.setItem('cart',JSON.stringify(this.list));
                    }else{
                        Toast('您的网络抽风了');
                    }
                });

            },
            //删除购物项，修改并没有完成，与地址修改相同
            deleteCartItem(id){
                mui.confirm('您确定删除地址',(message)=>{
                    if(message === 0){
                        this.$router.push('/cart');
                    }else{
                        this.$http.get('http://127.0.0.1:3002/deleteCartItem?id='+id).then((result)=>{
                            if(result.body.status ===0){
                                Toast(result.body.message);
                                this.$store.commit('deleteCart',id);
                                this.$router.push('cart');
                            }else {
                                Toast('您的网络抽风了');
                            }
                        })
                    }
                })
            }
        },
        created() {
            this.getCartList();
        }

    }
</script>

<style scoped>

</style>